<template>
  <div class="register-box">
    <ul class="content-ul">
      <li>
        <span class="li-left">*姓名</span>
        <input v-model="name" type="text"  placeholder="请输入姓名" >
      </li>
      <li>
      <li>
        <span class="li-left">*手机号码</span>
        <input v-model="phone" type="tel" placeholder="请输入手机号">
      </li>
      <li>
        <span class="li-left">*验证码</span>
        <div class="code-box">
          <input type="number" v-model="verifyCode" placeholder="输入验证码">
          <button :disabled="isDisabled" @click="getCode">{{sendCode}}</button>
        </div>
      </li>
      <li v-if="haveSuperior">
        <span class="li-left">推荐人</span>
        <input style="width:46%" v-model="referee" type="tel" placeholder="请输入手机号" @input="getNameByMobile()">
        <input v-model="refereeName" class="li-left" readonly>
      </li>
      <li v-if="!haveSuperior">
        <span class="li-left">推荐人</span>
        <input style="width:46%" v-model="referee" type="tel" placeholder="请输入手机号" @input="getNameByMobile()">
        <input v-model="refereeName" class="li-left" readonly>
      </li>
    </ul>
    <p class="tips"> 备注：</p>
    <p class="tips">1、请输入真实姓名和电话，这是您以后在英拉的唯一识别。</p>
    <p class="tips">2、请谨慎输入你的推荐人手机号码，关系绑定后不可更改。</p>
    <button class="submit-btn" @click="toRegister()">提交</button>
    <div class="pay-pop" v-if="confirmTip">
      <div style="width:100%;height:100%;" @click="confirmTip=false"></div>
      <div class="pay-bg" style="text-align: center">
        <p>您填写的推荐人没有推荐功能，请重新填写</p>
        <div class="reg-btn" @click="confirmTip=false">确定</div>
        <!--<div class="reg-btn cancel-btn"  @click="confirmTip=false">取消</div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../public/global.vue'
  export default {
    name: 'name',
    data() {
      return {
        phone: '',//手机号码
        verifyCode: '',//验证码
        sendCode:'发送验证码',//发送验证码
        currentTime:61,//
        isDisabled:false,//按钮是否禁用
        name:'',//姓名
        haveSuperior:false,
        referee:'',//推荐人手机号
        refereeName:'',//推荐人姓名
        confirmTip:false,
        refereeLevel:4,//推荐人等级
        cannotBindTip:false,//无法绑定弹窗
      }
    },
    methods:{
      //验证短信
      toRegister(){
        let _this=this;
        let url = global.apiUrl;
        let mobile=_this.phone;
        let verifyCode=_this.verifyCode;
        let referee = this.referee
        let name = this.name;
        let pattern=/^[\u4e00-\u9fa5]+$/;
        if(this.refereeLevel<4){

          _this.confirmTip=true;
          return;
//          if(!window.confirm('您填写的推荐人没有推荐功能，是否更改?')){
//            _this.$http.get(url + '/user/checkCode?mobile='+mobile+"&code="+verifyCode+"&name="+name+"&referee="+referee).then(res => {
//              if(res.data.code==0){
//                this.confirmTip = false
//                global.setCookie("level",2)
//                alert("注册会员成功");
//                setTimeout(function () {
//                  _this.$router.go(-1)
//                }, 1200 )
//              }else{
//                alert(res.data.msg);
//              }
//              _this.confirmTip=false
//            })
//          }else{
//            _this.confirmTip=false
//          }
        }else{
          _this.$http.get(url + '/user/checkCode?mobile='+mobile+"&code="+verifyCode+"&name="+name+"&referee="+referee).then(res => {
            if(res.data.code==0){
              this.confirmTip = false
              global.setCookie("level",2)
              alert("注册会员成功");
              setTimeout(function () {
                _this.$router.go(-1)
              }, 1500 )
            }else{
              alert(res.data.msg);
            }
            _this.confirmTip=false
          })
        }
      },
      //获取验证码
      getCode(){
        let _this=this;
        let url = global.apiUrl;
        let myreg=/^1[345678]{1}\d{9}$/;
        let mobile=_this.phone;
        let name = this.name;
        let pattern=/^[\u4e00-\u9fa5]+$/;
        if(!pattern.test(name)){
          alert("名称不能为空且必须为中文");
          return
        }
        if(!myreg.test(mobile)){
          alert("手机号码有误")
          return;
        }else{
          _this.$http.get(url + '/user/getCode?mobile='+mobile).then(res => {
            if(res.data.code==0){

            }else{
              alert(res.data.msg);
            }
          })
        }
        let currentTime=_this.currentTime;
        let interval=setInterval(function(){
          currentTime--;
          _this.sendCode=currentTime+'s';
          _this.isDisabled=true;
          if(currentTime<0){
            clearInterval(interval);
            _this.sendCode='重新发送';
            _this.currentTime=61;
            _this.isDisabled=false;
          }
        },1000)
      },
      checkSuperior(){
        let url = global.apiUrl;
        this.$http.get(url + '/user/checkSuperior').then(res => {
          if(res.data.code==0){
            if(res.data.data!=null){
              this.haveSuperior=true
              this.referee=res.data.data.mobile
              this.refereeName = res.data.data.name
            }
          }else{

          }
        })
      },
      getNameByMobile(){
        let referee = this.referee
        if(referee.length<10){
          return;
        }
        let url = global.apiUrl;
        this.$http.get(url + '/user/getNameByMobile?mobile='+referee).then(res => {
          if(res.data.code==0){
            this.refereeName = res.data.data.name
            this.refereeLevel = res.data.data.level
            console.log(this.refereeName)
          }else{
            this.refereeName = '找不到用户'
            this.refereeLevel=0;
          }
        })
      },
      popTip(){
        this.confirmTip = true
      }
    },
    created(){
      document.title="免费注册会员"
      this.checkSuperior()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.register-box{
  width:100%;
  padding:2.5%;
  .content-ul{
    width:100%;
    li{
      width: inherit;
      line-height: 2.5rem;
      font-size:1rem;
      border-bottom:1px solid #eee;
      .li-left{
        display: inline-block;
        width:25%;
        color:#777;
        vertical-align: middle;
      }
      input{
        width:70%;
        border:none;
        outline: none;
        font-size: 0.95rem;
      }
      .code-box{
        display: inline-block;
        width:73%;
        line-height: 2rem;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: middle;
        text-align: right ;
        input{
          width:50%;
          vertical-align: middle;
          margin-right:8%;
          font-size: 0.95rem;
        }
        button{
          display: inline-block;
          width:40%;
          height:30px;
          line-height: 30px;
          font-size: 0.85rem;
          border-radius:6px;
          background: #D44242;
          color:#fff;
          text-align: center;
          border:none;
          outline: none;
        }
      }
    }
  }
  .tips{
    line-height: 1.5rem;
    font-size: 0.7rem;
    color:#aaa;
  }
  .submit-btn{
    width:100%;
    height:2.4rem;
    line-height: 2.4rem;
    text-align: center;
    font-size: 1rem;
    color:#fff;
    border-radius: 6px;
    background: #d44242;
    border:none;
    margin-top:20%;
  }
  .pay-pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    .pay-bg {
      position: absolute;
      top: 30%;
      left: 0;
      right: 0;
      width: 90%;
      margin: auto;
      background: #fff;
      padding: 5% 10%;
      border-radius: 6px;
      .price {
        height: 3rem;
        line-height: 3rem;
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 10px;
      }
      label {
        display: block;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        border-bottom: 1px solid #eee;
        font-size: 1rem;
        font-weight: inherit;
        input {
          -webkit-appearance: radio;
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin: 0;
        }
        span {
          margin-left: 10%;
          vertical-align: middle;
        }
      }
      .pay-btn {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        font-size: 1rem;
        color: #fff;
        background: #d44242;
        border-radius: 6px;
        text-align: center;
        margin-top: 20px;
      }
    }
  }
  .reg-btn {
    display: inline-block;
    width: 40%;
    height:2rem;
    line-height: 2rem;
    font-size: 1rem;
    color:#fff;
    background: #d44242;
    border-radius:6px;
    text-align: center;
    margin-top:20px;
    /*margin-left: 55px;*/
  }
  .cancel-btn{
    background:#eee;
    color:#aaa;
    margin-left:10%;
  }
}
</style>
